/**
 * Created by JamesZhang on 2017/6/5.
 */


import React from "react";
import ReactDom from "react-dom";
import {HashRouter as Router, Route, Link, NavLink, withRouter, Redirect} from "react-router-dom";
import PropTypes from "prop-types";


import {Provider, connect} from "react-redux";
import {createStore, combineReducers, applyMiddleware} from "redux";
import thunk from "redux-thunk";


class App extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const {value} = this.props;
        return (
            <div>
                <h1>Hello App!</h1>
                <h3>Value is: {value}</h3>
            </div>
        )
    }
}
class Counter extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        const {value, onIncreaseClick} = this.props;
        return (
            <div>
                <h3>Value: {value}</h3>
                <button onClick={onIncreaseClick}>Add</button>
            </div>
        )
    }
}
class Groups extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                <h1>Hello Groups</h1>
                <ul>
                    <li>
                        <Link to="/groups/aaa">AAA</Link>
                    </li>
                    <li>
                        <Link to={`${this.props.match.url}/bbb`}>BBB</Link>
                    </li>
                </ul>
                <Route path={`${this.props.match.url}/:topicId`} component={GroupsComponent}></Route>
                {this.props.children}
            </div>
        )
    }
}
class GroupsComponent extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <h1>
                {this.props.location.pathname}
            </h1>
        )
    }
}

// Action
const increaseAction = {type: "Increase"};

// Reducer
function counter(state = {count: 0}, action){
    const count = state.count;
    switch (action.type){
        case "Increase":
            return {count: count + 1}
        default:
            return state;
    }
}



// store
const store = createStore(counter);


// Map Redux state to props
function mapStateToProps(state){
    return {
        value: state.count
    }
}

// Map Redux actions to component Props
function mapDispatchToProps(dispatch){
    return {
        onIncreaseClick: () => dispatch(increaseAction)
    }
}


// connect Components
const CounterRedux = connect(mapStateToProps, mapDispatchToProps)(Counter);
const AppRedux = connect(mapStateToProps)(App);



// render
ReactDom.render(
    <Provider store={store}>
        <Router>
            <div className="wrapper">
                <div>
                    <ul>
                        <li>
                            <Link to="/">App</Link>
                        </li>
                        <li>
                            <Link to="/groups">Groups</Link>
                        </li>
                        <li>
                            <Link to="/counter">Counter</Link>
                        </li>
                    </ul>
                    <Route path="/" exact component={AppRedux} />
                    <Route path="/groups" component={Groups} />
                    <Route path="/counter" component={CounterRedux} />
                </div>
            </div>
        </Router>
    </Provider>,
    document.getElementById("root")
)
